<template>
	<view class="list_item" :key="index" @click="toDetail">
		<view>
			<image class="pic" :src="item.hospitalBg" mode="aspectFill" />
		</view>
		<view class="list_right">
			<view class="list_item_title">{{item.hospitalName}}</view>
			<view class="list_item_center">
				<text class="list_item_level">{{item.grade}}</text>
			</view>
			<view class="list_item_address">
				<image class="icon" src="/static/icon/address.png"/>
				<text class="vc">{{item.address}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: ()=>({})
			}
		},
		options: { styleIsolation: 'shared' },
		data() {
			return {

			}
		},
    methods: {
      toDetail() {
        uni.navigateTo({
          url: '/pages/hospital/detail?hospitalId='+this.item.hospitalId
        })
      }
    }
	}
</script>

<style lang="scss" scope="scoped">
.list_item{
  display:flex;
  flex-flow: row;
  padding:24rpx 0;
}
.list_item:not(:first-child){
  border-top: 1rpx solid #F0F0F0;
}
.list_item .pic{
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
  display: block;
}
.list_right{
  min-height: 180rpx;
  display: flex;
  flex-direction: column;
}
.list_item_title{ 
  font-size: 32rpx;
  font-weight: 500;
  color: #000000;
  margin-bottom: 10rpx;
}
.list_item_center{
  flex: 1;
}
.list_item_level{
  font-size: 22rpx;
  color: #FFFFFF;
  line-height: 1;
  background: #0ABB90;
  border-radius: 8rpx;
  padding: 10rpx 12rpx;
  display: inline-block;
}
.list_item_address{
  font-size: 26rpx;
  color: #444444;
  line-height: 32rpx;
}
.list_item .icon{
  height: 32rpx;
  width: 32rpx;
  display: inline-block;
  vertical-align: middle;
}
</style>
